<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="Jxm">
    <script src="../jQuery/jquery-3.1.1.js"></script>
    <title>订单</title>
    <style>
        main{
            width: 242px;
            height: 220px;
            margin: 100px auto;
        }
        main>section{
            width: 50%;
            height: 100%;
            float: left;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }  
        div,li{
            width: 120px;
            height: 50px;
            border: 1px solid #999;
            line-height: 50px;
            text-align: center;
        }
        #order1 ul{
            display: none;
        }
        #order2 ul{
            display: none;
        }
        p{
            text-align: center;   
            font-size: 20px;         
        }
        </style>
</head>

<body>
    <main>
        <section id="order1">
            <div>销售订单</div>
            <ul>
                <li>订单1</li>
                <li>订单2</li>
                <li>订单3</li>
            </ul>
        </section>
        <section id="order2">
            <div>消费订单</div>
            <ul>
                <li>订单1</li>
                <li>订单2</li>
                <li>订单3</li>
            </ul>
        </section>
    </main>
        <p></p>
</body>

</html>

<script>

    var div1=$('#order1 div');
    var div2=$('#order2 div');
    var ul1=$('#order1 ul');
    var ul2=$('#order2 ul');

    div1.hover(function(){ul1.css('display','block')},function(){ul1.css('display','none')})
    div2.hover(function(){ul2.css('display','block')},function(){ul2.css('display','none')})
    ul1.hover(function(){ul1.css('display','block')},function(){ul1.css('display','none')})
    ul2.hover(function(){ul2.css('display','block')},function(){ul2.css('display','none')})

    $('li').each(function(){

        $(this).hover(function(){
            $(this).css('background-color','#eee')
        },function(){
            $(this).css('background-color','#fff')
        })

        $(this).click(function(){$('p').text($(this).text());$('ul').css('display','none');})
    })


</script>